<template>
  <div class="app-container">
    <avue-crud
        :option="option"
        ref="crud"
        :data="data"
        :table-loading="loading"
        :page.sync="page"
        @on-load="onLoad"
        @current-change="currentChange"
        @search-change="searchChange"
        @search-reset="resetChange"
      >
        <template slot="menuLeft" slot-scope="{}">
          <el-button
            type="primary"
            icon="el-icon-download"
            @click.stop="handelDownLoad"
            :disabled="page.total == 0"
            :loading="downLoading"
          >导出</el-button>
        </template>
      </avue-crud>
  </div>
</template>

<script>
import {getListRecords} from '@/api/manager.js'
export default {
  data() {
    return {
      loading: false,
      searchList: {},
      downLoading: false,
      /* 分页 */
      page: {
        pageSize: 10,
        pageSizes: [10, 20, 30, 40, 50, 100],
        pagerCount: 5,
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: 1,
        total: 0,
        background: false,
      },
      // 显示窗口
      data: [],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        selection: false,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,

        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        searchShowBtn: false,

        searchLabelWidth: '25%',
        menuWidth: 150,
        searchSpan: 6,
        searchMenuSpan: 4,
        menu:false,
        column: [
          {
            label: '文件名称',
            prop: 'fileName',
            display: false,
            search: true,
            overHidden: true,
            width:300
          },
          {
            label: '子文件名称',
            prop: 'subName',
            display: false,
            search: true,
            overHidden: true,
            width:300,
            formatter: function (row, value) {
              if (!value) return '-'
              return value
            },
          },
          {
            label: '授权渠道',
            prop: 'comAccountBank',
            display: false,
            search: true,
            type: 'select',
            dicData: [],
          },
          {
            label: '上传人',
            prop: 'createBy',
            display: false,
            search: true,
          },
          {
            label: '解析状态',
            prop: 'status',
            display: false,
            search: true,
            type: 'select',
            dicData: [
                { label: '成功', value: 2 },
                { label: '失败', value: 3 },
            ],
            width:100
          },
          /* {
            label: '导入时间',
            prop: 'importRange',
            display: false,
            type: 'daterange',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            display: false,
            search: true,
            searchRange: true,
            hide: true,
          }, */
          {
            label: '解析时间',
            prop: 'createRange',
            display: false,
            type: 'daterange',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            display: false,
            search: true,
            searchRange: true,
            hide: true,
          },
          /* {
            label: '导入时间',
            prop: 'importTime',
            display: false,
          }, */
          {
            label: '解析时间',
            prop: 'createTime',
            display: false,
          },
          {
            label: '备注',
            prop: 'remark',
            display: false,
          },
        ]
      }
    }
  },
  created() {
    this.getDict()
  },
  methods: {
    async getDict() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'SQQD',
      })
      this.option.column[2].dicData = dataSQQD
    },
    onLoad(page, params = {}) {
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
      this.loading = true
      getListRecords(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      /* if (params.importRange) {
        params.importStartTime = params.importRange[0]
        params.importEndTime = params.importRange[1]
      }
      params.importRange = [] */
      if (params.createRange) {
        params.startTime = params.createRange[0]
        params.endTime = params.createRange[1]
      }
      params.createRange = []
      this.searchList = {
        ...params,
        userName:params.createBy ? params.createBy : ''
      }
      this.onLoad()
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    /* 导出 */
    handelDownLoad() {
      let opt = {
        title: '批量上传记录',
        column: [
            {
                label: '文件名称',
                prop: 'fileName',
            },
            {
                label: '子文件名称',
                prop: 'subName',
            },
            {
                label: '授权渠道',
                prop: 'comAccountBank',
            },
            {
                label: '上传人',
                prop: 'createBy',
            },
            {
                label: '解析状态',
                prop: 'status',
            },
            {
                label: '解析时间',
                prop: 'createTime',
            },
            {
                label: '备注',
                prop: 'remark',
            },
        ],
        data: this.data,
      }
      this.$Export.excel({
        title: opt.title,
        columns: opt.column,
        data: opt.data,
      })
      /* let searchList = this.searchList
      let params = {
        ...searchList,
        pageNum: 1,
        pageSize: this.page.total,
      }
      this.downLoading = true
      getListRecords(params).then((res) => {
        this.downLoading = false
        if (res.status) {
          let data = res.data.records
          let opt = {
            title: '批量上传记录',
            column: [
                {
                    label: '文件名称',
                    prop: 'fileName',
                },
                {
                    label: '子文件名称',
                    prop: 'subName',
                },
                {
                    label: '授权渠道',
                    prop: 'comAccountBank',
                },
                {
                    label: '上传人',
                    prop: 'createBy',
                },
                {
                    label: '解析状态',
                    prop: 'status',
                },
                {
                    label: '解析时间',
                    prop: 'createTime',
                },
                {
                    label: '备注',
                    prop: 'remark',
                },
            ],
            data: data,
          }
          this.$Export.excel({
            title: opt.title,
            columns: opt.column,
            data: opt.data,
          })
        } else {
          this.$message.error(res.msg)
        }
      }) */
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
/deep/ .el-upload-list__item {
  transition: none !important;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.title {
  font-weight: 900;
}
.module .uplaod {
  width: 500px;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
/deep/ .row {
  display: flex;
  justify-content: space-between;
}
</style>
